import { Page } from "@/types/api";
import { useQueryClient } from "@tanstack/react-query";
import { useMemo } from "react";
import { Link } from "react-router-dom";

interface MentionContentProps {
  pageId: string;
}

export function MentionContent(props: MentionContentProps) {
  const { pageId } = props;
  const queryClient = useQueryClient();
  const pages = queryClient.getQueryData<Page[]>(["pages"]);

  const page = useMemo(() => {
    return pages?.find(page => page.pageId === pageId);
  }, [pages, pageId]);

  return (
    <Link
      to={`/doc/${pageId}`}
      className={`
        inline-flex items-center px-3 py-[4px] mx-1
        rounded-full text-sm font-medium
        bg-gradient-to-r from-purple-50/60 via-white/40 to-purple-100/50
        backdrop-blur-md
        border border-white/40 shadow-sm
        hover:from-purple-100/70 hover:via-white/60 hover:to-purple-200/60
        hover:shadow-md hover:border-white/60
        transition-all duration-300 ease-in-out
        text-gray-800
      `}
    >
      <span className="mr-1 text-lg">{page?.emoji}</span>
      <span className="truncate max-w-[150px]">{page?.title}</span>
    </Link>
  );
}
